@import '../style/theme.less';

.r-btn {
  padding: 0 15px;
  cursor: pointer;
  height: 30px;
  border: rgba(0, 0, 0, 0) 1px solid;
  transition-duration: 0.25s;

  &[disabled] {
    cursor: not-allowed;
  }

  &-arrow:not([disabled]) {
    span {
      width: 100%;
      display: inline-block;
      position: relative;
      transition: 0.25s;
    }
    span:after {
      content: '»';
      position: absolute;
      opacity: 0;
      transition: 0.25s;
    }
    &:hover {
      span {
        transform: translateX(-0.5em);
      }
      span:after {
        opacity: 1;
      }
    }
  }

  &-default {
    &-primary {
      background-color: @blue-6;
      border: @blue-6 1px solid;
      color: #fff;
      &:hover {
        background-color: @blue-5;
        border: @blue-5 1px solid;
      }
      &:active {
        background-color: @blue-7;
        border: @blue-7 1px solid;
      }
      &[disabled] {
        color: #f5f5f5;
        background-color: @blue-4;
        border-color: @blue-4;
      }
    }

    &-default {
      background-color: #fff;
      border: #ccc 1px solid;
      color: #000;
      &:hover {
        color: @blue-5;
        border: @blue-4 1px solid;
        background-color: @blue-1;
      }
      &:active {
        color: @blue-7;
        border: @blue-5 1px solid;
      }
      &[disabled] {
        color: rgba(0, 0, 0, 0.4);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
      }
    }

    &-success {
      background-color: @green-6;
      border: @green-6 1px solid;
      color: #fff;
      &:hover {
        background-color: @green-5;
        border: @green-5 1px solid;
      }
      &:active {
        background-color: @green-7;
        border: @green-7 1px solid;
      }
      &[disabled] {
        color: #f5f5f5;
        background-color: @green-4;
        border-color: @green-4;
      }
    }

    &-warning {
      background-color: @gold-6;
      border: @gold-6 1px solid;
      color: #fff;
      &:hover {
        background-color: @gold-5;
        border: @gold-5 1px solid;
      }
      &:active {
        background-color: @gold-7;
        border: @gold-7 1px solid;
      }
      &[disabled] {
        color: #f5f5f5;
        background-color: @gold-4;
        border-color: @gold-4;
      }
    }

    &-danger {
      background-color: @red-6;
      border: @red-6 1px solid;
      color: #fff;
      &:hover {
        background-color: @red-5;
        border: @red-5 1px solid;
      }
      &:active {
        background-color: @red-7;
        border: @red-7 1px solid;
      }
      &[disabled] {
        color: #f5f5f5;
        background-color: @red-4;
        border-color: @red-4;
      }
    }
  }

  &-outlined {
    &-primary {
      background-color: #fff;
      border: @blue-6 1px solid;
      color: @blue-6;
      &:hover {
        color: @blue-5;
        border: @blue-5 1px solid;
      }
      &:active {
        color: @blue-7;
        border: @blue-7 1px solid;
      }
      &[disabled] {
        color: @blue-4;
        border-color: @blue-4;
      }
    }

    &-default {
      background-color: #fff;
      border: #ccc 1px solid;
      color: #000;
      &:hover {
        color: @blue-5;
        border: @blue-5 1px solid;
      }
      &:active {
        color: @blue-7;
        border: @blue-7 1px solid;
      }
      &[disabled] {
        color: rgba(0, 0, 0, 0.2);
        border-color: #d9d9d9;
      }
    }

    &-success {
      background-color: #fff;
      border: @green-6 1px solid;
      color: @green-6;
      &:hover {
        color: @green-5;
        border: @green-5 1px solid;
      }
      &:active {
        color: @green-7;
        border: @green-7 1px solid;
      }
      &[disabled] {
        color: @green-4;
        border-color: @green-4;
      }
    }

    &-warning {
      background-color: #fff;
      border: @gold-6 1px solid;
      color: @gold-6;
      &:hover {
        color: @gold-5;
        border: @gold-5 1px solid;
      }
      &:active {
        color: @gold-7;
        border: @gold-7 1px solid;
      }
      &[disabled] {
        color: @gold-4;
        border-color: @gold-4;
      }
    }

    &-danger {
      background-color: #fff;
      border: @red-6 1px solid;
      color: @red-6;
      &:hover {
        color: @red-5;
        border: @red-5 1px solid;
      }
      &:active {
        color: @red-7;
        border: @red-7 1px solid;
      }
      &[disabled] {
        color: @red-4;
        border-color: @red-4;
      }
    }
  }

  &-text {
    &-primary {
      background-color: #fff;
      color: @blue-6;
      &:hover {
        color: @blue-5;
      }
      &:active {
        color: @blue-7;
      }
      &[disabled] {
        color: @blue-4;
      }
    }

    &-default {
      background-color: #fff;
      color: #000;
      &:hover {
        color: @blue-5;
      }
      &:active {
        color: @blue-7;
      }
      &[disabled] {
        color: rgba(0, 0, 0, 0.2);
      }
    }

    &-success {
      background-color: #fff;
      color: @green-6;
      &:hover {
        color: @green-5;
      }
      &:active {
        color: @green-7;
      }
      &[disabled] {
        color: @green-4;
      }
    }

    &-warning {
      background-color: #fff;
      color: @gold-6;
      &:hover {
        color: @gold-5;
      }
      &:active {
        color: @gold-7;
      }
      &[disabled] {
        color: @gold-4;
      }
    }

    &-danger {
      background-color: #fff;
      color: @red-6;
      &:hover {
        color: @red-5;
      }
      &:active {
        color: @red-7;
      }
      &[disabled] {
        color: @red-4;
      }
    }
  }

  &-small {
    padding: 0 13px;
    height: 25px;
    font-size: 12px;
  }
  &-middle {
    padding: 0 15px;
    font-size: 13px;
    height: 30px;
  }
  &-large {
    font-size: 14px;
    padding: 0 18px;
    height: 35px;
  }
}
